<template>
  <div>
    <a-form
      :form="form"
      @submit="handleSubmit"
    >
      <a-form-item
        label="商品名称"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <a-input
          v-decorator="[
            'goods_name',
            {rules: [{ required: true, message: '请输入商品分类名称!' }]}
          ]"
          placeholder="请输入商品分类名称..."
        ></a-input>
      </a-form-item>
      <a-form-item
        label="批次号"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <a-input
          v-decorator="[
            'number',
            {rules: [{ required: true, message: '请输入批次号!' }]}
          ]"
          placeholder="请输入批次号..."
        ></a-input>
      </a-form-item>
      <a-form-item
        label="批次名称"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <a-input
          v-decorator="[
            'name',
            {rules: [{ required: true, message: '请输入批次名称!!' }]}
          ]"
          placeholder="请输入批次名称..."
        ></a-input>
      </a-form-item>
      <a-form-item
        label="批次数量"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <a-input
          v-decorator="[
            'quantity',
            {rules: [{ required: true, message: '请输入批次数量!!' }]}
          ]"
          placeholder="请输入批次数量..."
        ></a-input>
      </a-form-item>
      <a-form-item
        label="收获时间"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <a-date-picker
          showTime
          placeholder="请选择收获时间"
          @ok="dateOnChange"
          format="YYYY-MM-DD HH:mm:SS"
          v-decorator="['harvest_date_time']"
        >
        </a-date-picker>
      </a-form-item>
      <a-form-item
        label="粗加工时间"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <a-date-picker
          showTime
          placeholder="粗加工时间时间"
          @ok="dateOnChange"
          format="YYYY-MM-DD HH:mm:SS"
          v-decorator="['roughing_date_time']"
        >
        </a-date-picker>
      </a-form-item>
      <a-form-item
        label="运输时间"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <a-date-picker
          showTime
          placeholder="请选择运输时间"
          @ok="dateOnChange"
          format="YYYY-MM-DD HH:mm:SS"
          v-decorator="['transport_date_time']"
        >
        </a-date-picker>
      </a-form-item>
      <a-form-item
        label="精加工时间"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <a-date-picker
          showTime
          placeholder="请选择精加工时间"
          @ok="dateOnChange"
          format="YYYY-MM-DD HH:mm:SS"
          v-decorator="['fine_machining_date_time']"
        >
        </a-date-picker>
      </a-form-item>
      <a-form-item
        label="包装时间"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <a-date-picker
          showTime
          placeholder="请选择包装时间"
          @ok="dateOnChange"
          format="YYYY-MM-DD HH:mm:SS"
          v-decorator="['packing_date_time']"
        >
        </a-date-picker>
      </a-form-item>
      <a-form-item
        label="入库时间"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <a-date-picker
          showTime
          placeholder="请选择入库时间"
          @ok="dateOnChange"
          format="YYYY-MM-DD HH:mm:SS"
          v-decorator="['warehousing_date_time']"
        >
        </a-date-picker>
      </a-form-item>
      <a-form-item
        label="图文说明"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <a-button type="primary" @click="showModal">编辑</a-button>

      </a-form-item>
      <a-form-item
        :wrapper-col="{ span: 12, offset: 9 }"
      >
        <a-button
          type="primary"
          html-type="submit"
        >
          保存
        </a-button>
      </a-form-item>
    </a-form>
    <a-modal
      title="Modal"
      v-model="visible"
      width="60%"
      @ok="saveHtml"
      okText="确认"
      cancelText="取消"
    >
      <quill-editor
        v-model="content"
        ref="myQuillEditor"
        :options="quillConfig"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
      </quill-editor>

    </a-modal>

  </div>
</template>

<script>
import { BatchSave } from '@/api/batch'
import quillConfig from '../../config/quill-config.js'

export default {
  name: 'NewBatch',
  data () {
    return {
      quillConfig,
      dateObj: {},
      visible: false,
      content: '',
      config1: {
        rules: [{ type: 'object', required: true, message: '请选择收获时间!' }]
      },
      config2: {
        rules: [{ type: 'object', required: true, message: '请选择粗加工时间!' }]
      },
      config3: {
        rules: [{ type: 'object', required: true, message: '请选择运输时间!' }]
      },
      config4: {
        rules: [{ type: 'object', required: true, message: '请选择精加工时间!' }]
      },
      config5: {
        rules: [{ type: 'object', required: true, message: '请选择包装时间!' }]
      },
      config6: {
        rules: [{ type: 'object', required: true, message: '请选择入库时间!' }]
      }
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  methods: {
    dateOnChange (date) {
    },
    addStyle (Str) {
      let strArr = []
      let newStr = ''
      strArr = Str.split('<img')
      for (let i = 0; i < strArr.length; i++) {
        if (i !== 0) {
          strArr[i] = '<img style=\'max-width:100%;height:auto;\' ' + strArr[i]
        }
        newStr += strArr[i]
      }
      return newStr
    },
    handleSubmit: function (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          if (this.content === '') {
            this.$message.warning('请填写批次详情图文')
            return false
          }
          values.details = this.addStyle(this.content)

          console.log(values)

          BatchSave(values)
            .then((res) => {
              if (res) {
                this.$message.success('新增批次成功！')
                this.$router.push({ path: 'batch-list' })
              }
            })
            .catch((err) => {
              console.log(err)
              this.$message.warning('新增批次失败！')
            })
        }
      })
    },
    showModal () {
      this.visible = true
    },
    onEditorBlur () {}, // 失去焦点事件
    onEditorFocus () {}, // 获得焦点事件
    onEditorChange () {}, // 内容改变事件
    saveHtml (event) {
      this.visible = false
    }
  }
}
</script>

<style scoped lang="less">
  ant-calendar-picker{
    width:100%;
  }
</style>
